<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @confirm="save" @close="close">
        <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="140px">
            <el-form-item label="应用类型" prop="type">
                <el-select v-model="formdata.type" disabled placeholder="请选择所属公司" style="width: 100%;">
                    <el-option :value="1" label="服务商代开发" />
                    <el-option :value="2" label="自建应用" />
                  </el-select>
            </el-form-item>
            <el-form-item label="应用名称" prop="agentName">
                <el-input v-model="formdata.agentName"  placeholder="请输入应用名称"/>
            </el-form-item>
            <el-form-item label="公司名称" prop="name">
                <el-input v-model="formdata.name" show-word-limit maxlength="40" placeholder="请输入所属公司名称"/>
            </el-form-item>
            <el-form-item label="应用ID" prop="agentId">
                <el-input v-model="formdata.agentId"  placeholder="请输入应用ID"/>
            </el-form-item>
            <el-form-item label="企业微信ID" prop="corpid">
                <el-input v-model="formdata.corpid" placeholder="请输入企业微信ID"/>
            </el-form-item>
            <el-form-item label="应用Secret" prop="secret">
                <el-input v-model="formdata.secret" placeholder="应用Secret"/>
            </el-form-item>
            <el-form-item label="描述" prop="remark">
                <el-input type="textarea" v-model="formdata.remark" show-word-limit maxlength="50"/>
            </el-form-item>
        </el-form>
        
    </c-dialog>
</template>
<script setup>
import { ref,onMounted,reactive } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import {message} from '@/utils/element.js'
import {addAgent,editAgent} from '@/api/user'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: String,
    editData: Object
})
const emit = defineEmits(['update:show','result'])

const formdata = ref({type:2})
const ruleFormRef = ref(null)
const dialogFlag = ref(props.show)
const onlyLook = ref(false)

const rules = reactive({
    agentName: [
        { required: true, message: '请输入应用名称', trigger: 'blur' },
        //{ min: 3, max: 50, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    name:[
        { required: true, message: '请输入所属公司名称', trigger: 'blur' },
    ],
    agentId:[
        { required: true, message: '请输入应用ID', trigger: 'blur' },
    ],
    corpid:[
        { required: true, message: '请输入企业微信ID', trigger: 'blur' },
    ],
    secret:[
        { required: true, message: '请输入应用Secret', trigger: 'blur' },
    ],
  })

onMounted(async ()=>{
    if(props.editData._id){ // 编辑
        formdata.value = props.editData
    }
})

const save = async() => {
    await ruleFormRef.value.validate(async(valid, fields) => {
        if (valid) {
            let res = {}
            if(props.editData._id){
                res = await editAgent(formdata.value)
            }else{
                res= await addAgent(formdata.value)
            }
            if(res.code ==200){
                message('数据提交成功',2)
                emit('result')
                close()
            }else{
                message(res.message,3)
            }
        } 
    })
}
const close = () => {
    emit('update:show', false)
}
</script>
<style lang="scss" scoped>
.mytips {
    font-size: 12px;
    color: #999;
}
</style>
<style lang="scss">
.jsxz {
    .el-form-item__content {
        display: block;
    }
}
</style>